<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- production version, optimized for size and speed -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<script>

</script>

<body>
    <p>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html directive:
        <span v-html="rawHtml"></span>
    </p>

    <div v-bind:id="dynamicId"></div>

    <button v-bind:disabled="isButtonDisabled">Button</button>

    {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('')
    }}

    <div v-bind:id="'list-' + id"></div>

    <!-- this is a statement, not an expression: -->
    {{ var a = 1 }}

    <!-- flow control won't work either, use ternary expressions -->
    {{ if (ok) { return message } }}

    <p v-if="seen">Now you see me</p>

    <a v-bind:href="url"> ... </a>

    <a v-on:click="doSomething"> ... </a>

    <form v-on:submit.prevent="onSubmit"> ... </form>

    <!-- full syntax -->
    <a v-bind:href="url"> ... </a>
    <!-- shorthand -->
    <a :href="url"> ... </a>


    <!-- full syntax -->
    <a v-on:click="doSomething"> ... </a>
    <!-- shorthand -->
    <a @click="doSomething"> ... </a>



    <div id="app">
        {{ message | capitalize }}
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'runoob'
            },
            filters: {
                capitalize: function (value) {
                    if (!value) return ''
                    value = value.toString()
                    return value.charAt(0).toUpperCase() + value.slice(1)
                }
            }
        })
    </script>


</body>

</html>